import { reactive } from 'vue'

export function usePagination(
  cb: (...args: any[]) => any,
  sizeOption: Array<number> = [10, 20, 30, 40, 50]
) {
  const pagination = reactive<{
    current: number
    total: number
    size: number
    sizeOption: Array<number>
    onPageChange: (page: number, extraData?: object) => void
    onSizeChage: (size: number, extraData?: object) => void
    setTotal: (total: number) => void
    reset: () => void
  }>({
    current: 1,
    total: 0,
    size: sizeOption[0],
    sizeOption,
    onPageChange: (page: number, extraData?: object) => {
      pagination.current = page
      return extraData ? cb(extraData) : cb()
    },
    onSizeChage: (size: number, extraData?: object) => {
      pagination.current = 1
      pagination.size = size
      return extraData ? cb(extraData) : cb()
    },
    setTotal: (total: number) => {
      pagination.total = total
    },
    reset() {
      pagination.current = 1
      pagination.total = 0
      pagination.size = sizeOption[0]
    }
  })

  return {
    pagination,
    onPageChange: pagination.onPageChange,
    onSizeChage: pagination.onSizeChage,
    setTotal: pagination.setTotal
  }
}
